<template>
    <div>
        <van-nav-bar title=关注收藏 left-arrow @click-left="onClickLeft" />
        <van-tabs v-model:active="active" @click-tab="onClickTab">
            <van-tab title="医生">
   <van-cell :title="'关注医生数量：' + num" />
                <van-card @click="btnvanListDiv(item)" class="doctor-card" v-for="(item, index) in doctorList"
                    :key="index" :thumb="item.img">
                    <template #tags>
                        <p class="p1"> <b>{{ item.name }}</b>&nbsp;{{ item.state }}</p>
                        <p>{{ item.nosocomium }}-{{ item.department }}</p>
                        <p class="content">擅长:{{ item.content }}</p>
                    </template>
                </van-card>
            </van-tab>
            <van-tab title="商品">内容 2</van-tab>
        </van-tabs>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'
import { useCounterStore } from '../pinia/index.ts'//引入pinia
const store = useCounterStore()
const router = useRouter()
const onClickLeft = () => history.back();
const active = ref(0);

interface Tab {
    title: string;
}
interface Doctor {
    name: string;
    state: string;
    nosocomium: string; // 确保定义了这个属性
    department: string;
    content: string;
    img: string;
}
const doctorList: Doctor[] = store.CollectList
const onClickTab = (tab: Tab) => {

};
const num=ref(doctorList.length)
// 点击数据 
const btnvanListDiv = (item: {}) => {
    store.data = item
    router.push('/consultationDetails')
};

</script>
<style scoped>
.doctor-card {
    color: #7a7878;
    width: 100%;
}

.p1 {
    font-size: 16px;
    margin-bottom: 10px;
    padding-top: 0.1rem;
}

.content {
    padding-top: 0.05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>